<template>
	<view class="page_wrapper">
		<view class="menus_block bottom_line">
			<view class="menu" @click="changeStatus('本周')">
				<view :class="{'active' : queryForm.dateType === '本周'}">本周</view>
			</view>
			<view class="menu" @click="changeStatus('本月')">
				<view :class="{'active' : queryForm.dateType === '本月'}">本月</view>
			</view>
			<view class="menu" @click="changeStatus('自定义')">
				<view :class="{'active' : queryForm.dateType === '自定义'}">自定义</view>
			</view>
		</view>
		<!-- <qiun-data-charts type="column" :chartData="chartData" /> -->
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	export default {
		data() {
			return {
				queryForm: {
					dateType: '本周',
					pageNo: 1,
					pageSize: 20
				},
				chartData: {},
			}
		},
		onLoad() {
			this.fetchData()
		},
		onReady() {
			this.getServerData()
		},
		methods: {
			fetchData() {
				uni.showLoading()
				request.get( 
					'/devFuncs/search', 
					{
						'status' : this.status
					}
				).then(res => {
					uni.hideLoading()
					console.log(res)
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					let res = {
							categories: ["2016","2017","2018","2019","2020","2021"],
							series: [
								{
									name: "目标值",
									data: [35,36,31,33,13,34]
								},
								{
									name: "完成量",
									data: [18,27,21,24,6,28]
								}
							]
						};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_wrapper{
		.menus_block{
			height: 50px;
			display: flex;
			.menu{
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.menu > .active{
				font-weight: 500;
				height: 48px;
				line-height: 48px;
				padding-left: 20px;
				padding-right: 20px;
				border-bottom: 3px solid #36ab60;
			}
		}
	}
</style>
